<template>
  <view> 英雄联盟 </view>
  <navigator url="/packageA/pages/cat/cat">去分页A </navigator>
  <navigator url="/packageB/pages/apple/apple">去分页B </navigator>
  <navigator url="/pages/selector-query/selector-query">节点查询</navigator>
  <navigator url="/pages/form/form">表单校验</navigator>

  <uni-badge size="small" :text="100" absolute="rightBottom" type="primary">
    <button type="default">右下</button>
  </uni-badge>

  <uni-badge text="1"></uni-badge>

  <uni-badge text="2" type="purple" @click="bindClick"></uni-badge>

  <uni-badge text="3" type="primary" :inverted="true"></uni-badge>

  <!-- 直接使用自定义组件 -->
  <custom-tabs></custom-tabs>
</template>

<script setup>
  // export default {
  //   onLoad() {
  //     console.log(
  //       '页面加载 - onLoad 场景：获取页面参数，调用只需要发一次的请求'
  //     )
  //   },
  //   onShow: function () {
  //     console.log(
  //       '页面显示 - onShow 场景：在其他页面可添加商品，切换显示到购物车页的时，需要重新加载最新数据'
  //     )
  //   },
  //   onHide: function () {
  //     console.log('页面隐藏 场景：页面隐藏时停止定时器，页面显示时启动定时器')
  //   },
  //   onReady() {
  //     console.log('页面渲染完成 场景：获取组件的高度')
  //   },
  // }

  // 组合式 API
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { onMounted } from 'vue'

  onLoad(() => {
    console.log('页面加载 - onLoad2')
  })
  onShow(() => {
    console.log('页面显示 - onShow2')
  })

  // vue 生命周期，只在自定义组件中使用
  // keep-alive 的两个生命周期钩子函数不建议使用，因为只在H5端兼容
  onMounted(() => {
    console.log('vue 生命周期 - 挂载完成')
  })
</script>

<style></style>
